<template>
  <div :class="$style.board">
    <el-dialog v-model="open" fullscreen :before-close="backStorage">
      <div id="index" style="height: 100%; width: 100%" :class="$style.bgColor">
        <div style="height: 80px; text-align: center">
          <h3 style="color: red; padding-top: 10px; letter-spacing: 5px">
            机台效率分析看板
          </h3>
          <p style="color: #ffd700; margin-top: 5px">当前实时时间:{{ date }}</p>
        </div>

        <!-- <Button type="primary" @click="show_change1">查看机台效率分析</Button> -->
        <div name="siq" class="qwe" style="width: 100%; height: 85%">
          <v-chart
            ref="chart"
            @click="handle_click"
            :options="option"
            id="echarts"
            style="width: 100%; height: 800px"
          ></v-chart>
        </div>
      </div>
      <div slot="footer"></div>
    </el-dialog>
    <el-dialog
      v-model="selse2"
      title="查看机台效率分析"
      width="800"
      :append-to-body="true"
    >
      <MachineEffciency :jtbh="this.curJtbh"></MachineEffciency>
      <div slot="footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import BoardService from "@/api/board/board";
import MachineEffciency from "./MachineEffciency.vue";

const mapName = {
  G: "正常生产",
  Y: "换模/试模/调机/换料",
  R: "修模/修机/停机/待料/保养",
  V: " 首件/品质",
  W: "工单等待",
};
const mapColor = { G: "green", Y: "yellow", R: "red", V: "violet", W: "white" };

export default {
  components: { MachineEffciency },
  data() {
    return {
      sys_m_data: [],
      curJtbh: "E01",
      selse: false,
      selse1: false,
      open: true,
      selse2: false,
      date: this.$moment().format(),
      option: {
        legend: {
          top: 5,
          left: 30,
          textStyle: {
            color: "white",
          },
        },
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} ({d}%)"
          formatter: function (params) {
            return `${params.seriesName}<br/>${params.name} : ${params.data.value} (${params.percent})%`;
          },
        },
        series: [
          /*大饼*/
          {
            name: "TOTAL",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["12%", "50%"],
            avoidLabelOverlap: false,
            data: [],
            label: {
              normal: {
                position: "center",
                formatter: "{a}",
                fontSize: "15",
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontWeight: "bold",
                },
              },
            },
          },
        ],
      },
    };
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer); //在vue实例销毁钱，清除定时器
    }
    if (this.timer1) {
      clearInterval(this.timer1); //在vue实例销毁钱，清除定时器
    }
    // // 释放echarts对象
    // let dcharts = echarts.getInstanceByDom(this.$refs.chart)
    // if (dcharts) {
    //   console.log("释放echarts对象")
    //   console.log(dcharts)
    //   echarts.dispose(dcharts)
    // }
  },
  mounted() {
    this.get_info();
    var _this = this; //声明一个变量指向vue实例this,保证作用域一致
    if (this.timer) clearInterval(this.timer);
    this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000);
  },
  methods: {
    backStorage() {
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push({ path: "/index" });
    },
    // 获取机台效率分析数据 并绘制饼图
    get_info() {
      BoardService.getMachineEfficiencyBoard()
        .then((res) => {
          if (res.code === 200) {
            // 总计机台效率
            this.option.series[0].data = res.data[0].map((a) => {
              return {
                name: mapName[a.oeeColor],
                value: a.oeeSec,
                oeeRate: a.oeeRate,
                itemStyle: { color: mapColor[a.oeeColor] },
              };
            });

            // 各机台效率
            const tmpSeries = res.data[1].map((a, i) => {
              return {
                name: a.oeeJtbh,
                type: "pie",
                // radius: "18%",
                radius: ["30", "50"],
                center: [
                  parseInt(33 + (i % 7) * 10) + "%",
                  parseInt(50 + parseInt(i / 7) * 125),
                ],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    position: "center",
                    formatter: "{a}",
                    fontSize: "15",
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      fontWeight: "bold",
                    },
                  },
                },
                data: a.states.map((b) => {
                  return {
                    name: mapName[b.oeeColor],
                    value: b.oeeSec,
                    oeeRate: b.oeeRate,
                    itemStyle: { color: mapColor[b.oeeColor] },
                  };
                }),
              };
            });

            this.option.series.push(...tmpSeries);
          } else {
            alert(res.msg);
          }
        })
        .catch((err) => {
          alert(err + "网络原因：请检查网络连接或服务器状态");
          console.log(err + "网络原因：请检查网络连接或服务器状态");
        });
    },
    // 查看具体机台效率分析
    handle_click(para) {
      if (para.seriesName == "TOTAL") {
        return;
      }
      this.selse2 = true;
      this.curJtbh = para.seriesName;
    },
  },
};
</script>

<style lang="scss" module>
@use "./board.scss";
.board {
  :global {
    .el-dialog {
      background-image: url("../../../assets/images/bj.jpg");
      background-size: 100% 100%;
    }
  }
}
</style>
